<!DOCTYPE html>
<html  class="full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户后台管理系统</title>
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
    <link href="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>

    <style>
        .full {
            height: 100%;
        }
    </style>
</head>

<body class="full" scrolling="no" style="margin:0px">
<div id="app" class="full">
    <el-container class="full">
        <!-- <el-header>AD</el-header> -->
        <!-- 顶部导航 -->
        <el-header style="padding:0px">
            <el-menu mode="horizontal" background-color="#363d47" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="logo">
                    <image src="http://www.pinza.com.cn/Uploads/2017-12-15/5a337f6ac533f.png" style="height: 100%;"></image>
                </el-menu-item>
                <a href="/logout">
                <el-menu-item index="quite" style="float: right;">
                    退出
                </el-menu-item></a>
                <template v-for="(bean,key) in List">
                    <el-menu-item style="float: right;" v-bind:index="key.toString()" @click="navDeal(bean.id)"><i class="el-icon-location-outline"></i>{{bean.permission_name}}</el-menu-item>
                </template>
            </el-menu>
        </el-header>
        <el-container>
            <el-aside>
                <el-menu style="height:100%" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <template v-for="(second,key) in listTwo">
                        <el-menu-item v-bind:index="key.toString()" @click="jump(second.permission_url)"><i class="el-icon-arrow-right"></i>{{second.permission_name}}</el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe :src="ifreamSrc" frameborder="0" style="width: 100%;height: 99%;" scrolling="yes"></iframe>
            </el-main>
        </el-container>
        <#--<el-footer>页脚</el-footer>-->
    </el-container>
</div>
</body>
<script src="http://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        List: [],//El表达式直接遍历
        listTwo: [],
        ifreamSrc:'/order/orderList.page',
        },
        async mounted(){
            this.ajaxFunction();
        },
        methods: {
            navDeal: function (str) {
                // async navDeal: function (str) {
                try {
                    // var response = await axios.get(url);
                    //模拟数据：get请求得到的二级菜单列表
                    var leftList = "";
                    $.ajax({
                        url: '/permission/permissionTreeList.json',
                        type: 'get',
                        data: {pid:str},
                        async: false,
                        dataType: 'json',
                        success: function (result) {
                            if(result.ret){
                                leftList =result.data;
                            }else{
                                alert(result.msg);
                            }
                        }
                    });
                    this.listTwo = leftList;
                    //实际数据，response.data 直接获取。不用声明变量，直接在vue的data中声明，这里直接使用；
                    // this.listTwo = response.data;

                } catch (error) {
                    alert(error)
                }

            },
            jump: function (str) {
                this.ifreamSrc = str
            },
            ajaxFunction(){
                var resultData = [];
                var bool = false;
                $.ajax({
                    url: '/permission/permissionTreeList.json',
                    type: 'get',
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if(result.ret){
                            resultData = result.data;
                            bool = result.ret;
                        }
                    }
                });
                if (bool){
                    this.List = resultData;
                }else{
                    this.$message({
                        type: 'success',
                        message: '页面加载异常!'
                    });
                }

            },
        }
    })
</script>

</html>